<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bili_log_style.css">
</head>
</head>
<body>
    <div class="login-container">
        <!-- 二维码模块 -->
        <div class="qr-section">
            <div class="qr-section__header">
                <div class="qr-section__title">扫描二维码登录</div>
            </div>
            <div class="qr-section__code">
                <img src="./image/bili登录二维码示例.png" alt="">
            </div>
            <div class="qr-section__footer">
                <p class="qr-section__footer-line">请使用</p>
                <a href="#" class="qr-section__footer-link">哔哩哔哩客户端</a>
                <p>扫码登陆或扫码下载APP</p>
            </div>
        </div>
        
        <div class="vertical-divider"></div>
        
        <!-- 登录模块 -->
        <div class="login-form">
            <div class="login-form__header">
                <p>密码登录&emsp;|&emsp;短信登陆</p>
            </div>
            
            <!-- 输入模块 -->
            <div class="login-form__input-container">
                <div class="login-form__input-group">
                    <label>账号</label>
                    <input type="text" class="login-form__input" placeholder="请输入账号" autocomplete="off">
                </div>
                <div class="form-separator"></div>
                <div class="login-form__input-group login-form__input-group--password">
                    <label>密码</label>
                    <input type="password" class="login-form__input login-form__password-input" placeholder="请输入密码" autocomplete="off">
                    <a href="#" class="login-form__forgot-link">忘记密码？</a>
                </div>
            </div>
            
            <!-- 登录按钮模块 -->
            <div class="login-form__buttons">
                <div class="login-form__button-group">
                    <div class="login-form__button">注册</div>
                    <div class="login-form__button login-form__button--primary">登陆</div>
                </div>
            </div>
            
            <!-- 其他登录方式 -->
            <div class="login-form__other-options">
                <p class="login-form__other-options-title">其他登陆方式</p>
                <div class="login-form__other-options-list">
                    <!-- 微信 -->
                    <div class="login-form__other-option">
                        <img src="./image/微信小图标.png" alt="">
                        <p class="login-form__other-option-text"><a href="#" class="login-form__other-option-link">微信登录</a></p>
                    </div>
                    <!-- 微博 -->
                    <div class="login-form__other-option">
                        <img src="./image/微博小图标.png" alt="">
                        <p class="login-form__other-option-text"><a href="#" class="login-form__other-option-link">微博登录</a></p>
                    </div>
                    <!-- QQ -->
                    <div class="login-form__other-option">
                        <img src="./image/qq小图标.png" alt="">
                        <p class="login-form__other-option-text"><a href="#" class="login-form__other-option-link">QQ登录</a></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部信息模块 -->
        <div class="login-footer">
            <p class="login-footer__text">未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</p>
            <p class="login-footer__text">登录或完成注册即代表你同意<a href="#" class="login-footer__link">&nbsp;用户协议&nbsp;</a>和<a href="#" class="login-footer__link">&nbsp;隐私政策&nbsp;</a></p>
        </div>
    </div>
</body>
</html>